<template>
  <!-- 头部统计 -->
  <div class="head-statistics">
    <el-row class="Headoverview-wrap" :gutter="12">
      <el-col class="Headitem-col" :span="6">
        <div class="Headitem-wrap">
          <p class="Headitem-value color-9">{{ getOrgInfoNumData.sysCount || 0 }}</p>
          <p class="Headitem-title color-8">监测消防系统数</p>
        </div>
        <span  class="Headitem_rightfamily iconfont icon-weibiaoti-1_xiaofangxitongshu"></span>
      </el-col>
      <el-col class="Headitem-col" :span="6">
        <div class="Headitem-wrap">
          <p class="Headitem-value color-3">{{ getOrgInfoNumData.assetsNum || 0}}</p>
          <p class="Headitem-title color-8">监测消防资产数</p>
        </div>
        <span  class="Headitem_rightfamily iconfont icon-weibiaoti-1_xiaofangzichanshu"></span>
      </el-col>
      <el-col class="Headitem-col" :span="6">
        <div class="Headitem-wrap">
          <p class="Headitem-value color-2">{{ getOrgInfoNumData.facsTotal || 0}}</p>
          <p class="Headitem-title color-8">监测物联设备数</p>
        </div>
        <span  class="Headitem_rightfamily iconfont icon-weibiaoti-1_wulianshebei"></span>
      </el-col>
      <el-col class="Headitem-col" :span="6">
        <div class="Headitem-wrap">
          <p class="Headitem-value color-5" style="font-size: 28px;">{{ getOrgInfoNumData.dutyUser || '-'}}</p>
          <p class="Headitem-title color-8">当前消控室值班人员</p>
        </div>
        <span  class="Headitem_rightfamily iconfont icon-weibiaoti-2_huaban1"></span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getOrgInfoNumCount } from '@/api/orghome'
export default {
  name: "HeadStatistics",
  props: {
    organizationId: {
      default() {
        return undefined
      }
    }
  },
  data() {
    return {
      systotal: "10",
      zctotal: "8",
      wlwtotal: "2",
      peoplename: "YD账号",
      getOrgInfoNumData: {}
    };
  },
  created() {
    this.getTable()
  },
  methods: {
    getTable() {
      let that = this
      getOrgInfoNumCount({
        orgId:this.organizationId || this.$store.state.userinfo.org.id||'',
        }).then(res => {
          that.getOrgInfoNumData = res.data
      })
    }
  }
};
</script>
<style lang="scss">
.head-statistics {
  /* 头部统计 */
  .Headoverview-wrap {
    display: flex;
    .Headitem-col {
      border: 1px solid #e1e1e1;
      background-color: #ffffff;
      border-radius: 4px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0px 6px 0 6px;
      .Headitem-wrap {
        color: #5f6994;
        margin-left: 20px;
        .Headitem-value {
          font-size: 40px;
        }
        .Headitem-title {
          font-size: 14px;
        }
      }
      .Headitem_rightfamily {
        font-size: 35px;
        color: #666;
        margin-right: 20px;
      }
    }
  }
}
</style>